<template>
  <div class="student">
    <div class="header">
      <el-input v-model="input1" placeholder="请输入姓名" size="Small" class="input" />
      <el-input v-model="input2" placeholder="请输入账号" size="Small" class="input" />
      
      <el-button type="primary" size="Small">查询</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData" border="true" stripe="true" class="table" style="width: 100%">
        <el-table-column  label="序号" width="80" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属学校" width="160" align="center">
          <template #default="scope">
            <span>{{ scope.row.classes.school.name}}</span>  
          </template>
        </el-table-column>  
        <el-table-column  label="姓名" width="160" align="center">
          <template #default="scope">
            <span>{{ scope.row.name + `父亲` }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="180" align="center" />
        <el-table-column prop="name" label="关联学生" width="145" align="center" />
        <el-table-column  label="与学生关系" width="180" align="center">
          <template #default="scope">
            <span>{{  `父亲` }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="账号" width="180" align="center" />       
      </el-table>
    </div>
    <div class="footer">
      <paging
        v-if="pagState"
        @pag="handlePag"
        @pag-add="handlePagAdd"
        @pag-reduce="handlePagReduce"
        @pag-skip="handleSkip"
        :msg="pageList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,defineAsyncComponent, reactive } from "vue";
import server from "../../../../api";
// 引入异步分页组件
const paging = defineAsyncComponent(
  () => import("../../../../components/paging.vue")
);

const input1 = ref("");
const input2 = ref("");

const value = ref("");

let tableData = reactive([]); // 表格数据存贮(渲染数据)
let inFormList = ref(); // 表格数据获取
let pages = ref(1); // 当前页
let total = ref(5); // 条数
let pagState = ref(false); // 当获取到数据展示分页

let pageList = ""; // 分页数据，需要传递给分页子组件

// const tableData = [
//   {
//     id:'1',
//     schoolname:'智慧校园',
//     parrntsname:'张三',
//     phoneNo:'13800000000',
//     associatedStudents:'张三三',
//     relationship:'父亲',
//     accountnum:'15600000000'
//   },
//   

// ]

//发送请求
const getRes = async (pagDate: { cp: number; ps: number }) => {
  const res = await server.yonghutongji.getparents_bypage(pagDate);
  // console.log(res.data.data);
  console.log(res.data.data.date);


  inFormList.value = res.data.data.date; // 表格数据
  pageList = res.data.data.page; // 分页数据
  pagState.value = true; // 当有数据展示分页条

  // 对获取的对象数据转化为数组形式
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i]);
  }
}
getRes({ cp: pages.value, ps: total.value });

// 分页条数更改数据
function listMain(upDate: { pages: number; total: number }) {
  tableData.length = 0; // 清空分页
  getRes({ cp: upDate.pages - 1, ps: upDate.total });
}

// 条数变更 --- 处理 分页组件 handlePag 事件
function handlePag(value: { pages: number; total: number }) {
  listMain(value);
}
// 增加
function handlePagAdd(value: { pages: number; total: number }) {
  listMain(value);
}

// 减少
function handlePagReduce(value: { pages: number; total: number }) {
  listMain(value);
}

// 跳转
function handleSkip(value: { pages: number; total: number }) {
  listMain(value);
}
</script>

<style scoped>
.gaikuang{
  margin: 20px;
}
.header{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.header .input{
  width: 200px;
  margin-right: 20px;
}
.header .select{
  width: 80px;
}
.main .table{
  margin:auto
}
</style>